/* 使用 CSS 变量定义常用颜色和间距等 */
:root {
    --main-padding: 10px;
    --border-color: #EAECF0;
    --success-bg-color: #ECFDF3;
    --success-border-color: #ABEFC6;
    --success-text-color: #067647;
    --info-text-color: #1570EF;
    --secondary-text-color: #667085;
    --font-family: MiSans;
}

.container {
    padding: var(--main-padding);
    height: 100vh;
    box-sizing: border-box;
    overflow-y: scroll;
    font-family: var(--font-family);
}

.scrollable-container {
    width: 100%;
    height: fit-content;
}

.device-item {
    width: 100%;
    box-sizing: border-box;
    height: 82px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    margin-bottom: var(--main-padding);
    padding: 0 var(--main-padding);
    flex-shrink: 0;
}

.device-item-content {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.device-item-title {
    font-weight: 500;
    font-size: 14px;
}

.device-info {
    font-size: 12px;
    color: var(--info-text-color);
    margin: 4px 0;
}

.device-address {
    width: 192px;
    font-size: 12px;
    color: var(--secondary-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recipe-container {
    height: fit-content;
    flex-wrap: wrap;
}

.recipe-item {
    width: 100%;
    height: 52px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    margin: var(--main-padding) 0;
    flex-shrink: 0;
}

.recipe-item-content {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.recipe-item-title {
    font-size: 12px;
    font-weight: 400;
}

.device-log-table {
    font-family: var(--font-family);
}